<template>
	<view class="downloadList">
		<u-navbar title="下载列表" @rightClick="rightClick" :autoBack="true" :placeholder="true">
			<view class="u-nav-slot" slot="right">
				{{editFlag?"完成":"编辑"}}
			</view>
		</u-navbar>

		<view v-if="fileList.length>0" class="fileList">
			<view class="fileItme" v-for="(item,index) in fileList" :key="item.id"
				@click="editFlag && handleSelect(index)">
				<view v-if="editFlag" class="checkBox">
					<image
						:src=" item.selected ?'https://mp.blrwworkshop.com/imgs/checksed.png':'https://mp.blrwworkshop.com/imgs/checks.png'"
						mode="">
					</image>
				</view>
				<image src="https://mp.blrwworkshop.com/imgs/pdfIcon.png" mode=""></image>
				<view class="fileName">
					{{item.name}}
				</view>
				<view class="lookBtn" :class="role==1?'bg_student':'bg_parent'" @click.stop="handleDetail(item)">
					查看
				</view>
			</view>
		</view>

		<view v-else class="dataNull">
			<image
				:src="role ==1 ?'https://mp.blrwworkshop.com/imgs/dataNull.png' :'https://mp.blrwworkshop.com/imgs/dataNulls.png'"
				mode="">
			</image>
			<view class="">
				暂无下载文件
			</view>
		</view>

		<view v-if="editFlag" class="bottomBox">
			<view class="bottomLeft" @click="handleSelectAll">
				<image
					:src="isAllSelected ?'https://mp.blrwworkshop.com/imgs/checksed.png':'https://mp.blrwworkshop.com/imgs/checks.png' "
					mode=""></image>
				<view class="">
					全选
				</view>
			</view>
			<view class="btns" :class="role==1?'btns_student_s':'btns_parent_s'" @click="handleDeleteSelected"
				:style="{opacity: selectedCount > 0 ? 1 : 0.5, pointerEvents: selectedCount > 0 ? 'auto' : 'none'}">
				删除 ({{selectedCount}})
			</view>
		</view>
	</view>
</template>

<script>
	import {
		qryDownloadLog,
		deleteDownloadLog
	} from "@/api/course.js"
	export default {
		data() {
			return {
				role: uni.getStorageSync('role'),
				editFlag: false,
				pageNum: 1,
				fileList: [],
			}
		},
		computed: {
			// 计算选中的数量
			selectedCount() {
				return this.fileList.filter(item => item.selected).length
			},
			// 判断是否全选
			isAllSelected() {
				return this.fileList.length > 0 && this.fileList.every(item => item.selected)
			}
		},
		onLoad() {
			this.handleGetqryDownloadLog()
		},
		methods: {
			async handleGetqryDownloadLog() {
				let res = await qryDownloadLog({
					pageNum: this.pageNum,
					pageSize: 10,
				})
				// 为每个文件添加selected属性，默认未选中
				const newFiles = res.rows.map(file => ({
					...file,
					selected: false
				}))
				this.fileList = [...this.fileList, ...newFiles]
			},
			rightClick() {
				// 退出编辑模式时清空选择
				if (this.editFlag) {
					this.fileList.forEach(item => {
						item.selected = false
					})
				}
				this.editFlag = !this.editFlag
			},
			handleDetail(item) {
				uni.navigateTo({
					url: `/pages/coursePackage/knowledgePointsDetail/knowledgePointsDetail?id=${item.id}&downUrl=${item.address}`
				})
			},
			// 切换单个文件的选中状态
			handleSelect(index) {
				this.fileList[index].selected = !this.fileList[index].selected
			},
			// 全选/取消全选
			handleSelectAll() {
				const isAllSelected = this.isAllSelected
				this.fileList.forEach(item => {
					item.selected = !isAllSelected
				})
			},
			// 删除选中的文件
			async handleDeleteSelected() {
				if (this.selectedCount === 0) return

				uni.showModal({
					title: '提示',
					content: `确定要删除选中的${this.selectedCount}个文件吗？`,
					success: async (res) => {
						if (res.confirm) {
							// 获取选中文件的ID列表
							const selectedIds = this.fileList
								.filter(item => item.selected)
								.map(item => item.downloadDetailsId)

							// 调用删除接口，这里假设接口支持批量删除
							this.handleDelfile(selectedIds)

						}
					}
				})
			},
			async handleDelfile(selectedIds) {
				try {
					let res = await deleteDownloadLog({
						ids: selectedIds.toString()
					})
					if (res.code == 200) {
						// 从列表中移除删除的文件
						this.fileList = this.fileList.filter(item => !item.selected)
						uni.showToast({
							title: '删除成功',
							icon: 'success',
							duration: 2000
						})
					}
				} catch (error) {
					uni.showToast({
						title: '删除失败',
						icon: 'none',
						duration: 2000
					})
					console.error('删除失败:', error)
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.downloadList {
		width: 100%;
		min-height: 100vh;
		background-color: #F9F9F9;

		.u-nav-slot {
			margin-right: 180rpx;
		}

		.fileList {
			width: 100%;
			margin-top: 1rpx;


			.fileItme {
				width: 100%;
				display: flex;
				align-items: center;
				height: 120rpx;
				background-color: #ffffff;
				padding: 24rpx 32rpx;
				box-sizing: border-box;
				margin-bottom: 1rpx;
				cursor: pointer;

				.checkBox {
					image {
						width: 36rpx;
						height: 36rpx;
						margin-right: 20rpx;
						// 添加过渡效果
						transition: all 0.2s ease;
					}

					.checked {
						opacity: 1;
					}

					.unchecked {
						opacity: 0.3;
					}
				}

				image {
					width: 72rpx;
					height: 72rpx;
				}

				.fileName {
					font-weight: 400;
					font-size: 28rpx;
					color: #333333;
					line-height: 40rpx;
					width: 420rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					margin-left: 8rpx;
				}

				.lookBtn {
					width: 100rpx;
					height: 48rpx;
					border-radius: 8rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #FFFFFF;
					line-height: 48rpx;
					text-align: center;
					margin-left: 86rpx;
					// 防止点击事件冒泡
					cursor: default;
				}
			}
		}

		.bottomBox {
			width: 100%;
			padding: 30rpx 32rpx;
			padding-bottom: 50rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #ffffff;
			position: fixed;
			bottom: 0;

			.bottomLeft {
				display: flex;
				align-items: center;
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
				cursor: pointer;

				image {
					width: 36rpx;
					height: 36rpx;
					margin-right: 10rpx;
					transition: all 0.2s ease;
				}

				.checked {
					opacity: 1;
				}

				.unchecked {
					opacity: 0.3;
				}
			}

			.btns {
				width: 204rpx;
				height: 60rpx;
				border-radius: 30rpx;
				font-weight: 400;
				font-size: 28rpx;
				line-height: 60rpx;
				text-align: center;
				transition: opacity 0.2s ease;
			}
		}
	}


	.dataNull {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 200rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #DDDDDD;
		margin-top: 20rpx;

		image {
			width: 330rpx;
			height: 330rpx;

		}
	}
</style>